<template>
  <div class="main-children">
    <div class="classifies-left">
      <div class="icon-mid">
        <div style="margin-left: 20px;">基本规格资源</div>
        <div style="font-size: 18px; color: #999999;text-align: center;margin-right: 22px"
             v-if="this.resourceList.pageInfo && this.resourceList.pageInfo.size == null">
          您还没有添加基本规格资源
        </div>
      </div>
    </div>
    <div v-if="this.customizeType =1">
      <div>
        <div class="region-icon">
          <div class="region-icon-overflow" style="display:flex; flex-wrap: wrap; ">
            <div v-for="(item, index) in resourceList.pageInfo.list" :key="index">
              <div class="region-subnode-icon" style="margin-left:22px;">
                <img class="region-subnode-icon-mid" :src='item.resourceIcon'>
                <div class="intruduce-icon">
                  <span class="intruduce-text">{{item.resourceName}}</span>
                </div>
                <div class="intruduce-icon" style="height:23px;">
                  <span class="intruduce-text-tw">基本价格</span>
                  <span class="intruduce-text-price" style="color: red">{{$t("priceIcon")}}50</span>
                </div>
                <div class="intruduce-icon" style="height:23px;">
                  <span class="intruduce-text-tw">按个数购买</span>
                  <span class="intruduce-text-price">x1</span>
                </div>
                <div class="intruduce-icon" style="height:23px;margin-top: 25px">
                  <span class="intruduce-text-tw">总价</span>
                  <span class="intruduce-text-price" style="color: red">{{$t("priceIcon")}}50</span>
                </div>
                <div class="last-border"></div>
                <div class="intruduce-last-bg">
                  <div style="width:50%;height: 25px;align-items: center;display: flex;">
                    <img style="width:24px;height:19px;" :src="onShowRightIcom(item.resourceType)">
                  </div>
                  <img class="intruduce-last-icon" style="cursor: pointer;" @click='onDeleteResource(item)'
                       src="../assets/images/icon_delete.png">
                </div>
              </div>
            </div>
          </div>
          <div class="border-mian"></div>
          <div class="price-bg" style="margin-top: 9px;">
            <div class="price-bg-text">
            </div>
            <div class="price-bg-text-two ">{{$t("totalPrice")}}： <span style="color: red">{{$t("priceIcon")}}{{this.totalPrice}}</span>
            </div>
          </div>
        </div>
        <div class="price-bg-el">
          <div class="price-bg-text">
          </div>
          <div style="width: 100%;display: flex;flex-direction: row;justify-content: center;margin-top: -6px">
            <div class="block">
              <el-pagination @current-change="handleCurrentChange()"
                             :current-page.sync="page"
                             layout="prev,pager,next"
                             :page-size="pagesize"
                             :total="pageCount">
              </el-pagination>
            </div>
          </div>
          <div class="basic-specifications-box">结算基本规格资源</div>
        </div>
      </div>
    </div>
    <div class="classifies-left" style="margin-top: 30px">
      <div class="icon-mid">
        <div style="margin-left: 20px;">定制规格资源</div>
        <div style="font-size: 18px; color: #999999;text-align: center;margin-right: 22px">
          您还没有添加定制规格资源
        </div>
      </div>
    </div>
    <div v-if="this.customizeType ===2">
      <div>
        <div class="region-icon">
          <div class="region-icon-overflow" style="display:flex; flex-wrap: wrap;">
            <div v-for="(item, index) in resourceList.pageInfo.list" :key="index">
              <div class="region-subnode-icon" style="margin-left:22px;">
                <img class="region-subnode-icon-mid" :src='item.resourceIcon'>
                <div class="intruduce-icon-ustomized">
                  <span class="intruduce-text">{{item.resourceName}}</span>
                </div>
                <div class="intruduce-icon-ustomized" style="height:23px;">
                  <span class="intruduce-text-tw">基本价格</span>
                  <span class="intruduce-text-price"
                        style="color: red">{{$t("priceIcon")}}{{item.resourceUnitPrice}}</span>
                </div>
                <div class="intruduce-icon-ustomized" style="height:23px;">
                  <span class="intruduce-text-tw">知识点&emsp;X{{item.knowledgeNum}}</span>
                  <span class="intruduce-text-price">{{$t("priceIcon")}}{{item.knowledgeUnitPrice}}/个</span>
                </div>
                <div class="intruduce-icon-ustomized" style="height:23px;">
                  <span class="intruduce-text-tw">{{item.isSetAnimationFour}}X1</span>
                  <span class="intruduce-text-price">{{$t("priceIcon")}}111/个</span>
                </div>
                <div class="intruduce-icon-ustomized" style="height:23px;margin-top: 25px">
                  <span class="intruduce-text-tw">总计</span>
                  <span class="intruduce-text-price"
                        style="color: red">{{$t("priceIcon")}}{{item.resourceTotalPrice}}</span>
                </div>
                <div class="last-border-ustomized"></div>
                <div class="intruduce-last-bg">
                  <div style="width:50%;height: 25px;align-items: center;display: flex;">
                    <img style="width:24px;height:19px;" :src="onShowRightIcom(item.resourceType)">
                  </div>
                  <img class="intruduce-last-icon" style="cursor: pointer;" @click='onDeleteResource(item)'
                       src="../assets/images/icon_delete.png">
                </div>
              </div>
            </div>
          </div>
          <div class="border-mian"></div>
          <div class="price-bg" style="margin-top: 9px;">
            <div class="price-bg-text">
            </div>
            <div class="price-bg-text-two ">{{$t("totalPrice")}}： <span style="color: red">{{$t("priceIcon")}}{{this.totalPrice}}</span>
            </div>
          </div>
        </div>
        <div class="price-bg-el">
          <div class="price-bg-text">
          </div>
          <div style="width: 100%;display: flex;flex-direction: row;justify-content: center;margin-top: -6px">
            <div class="block">
              <el-pagination @current-change="handleCurrentChange()"
                             :current-page.sync="page"
                             layout="prev,pager,next"
                             :page-size="pagesize"
                             :total="pageCount">
              </el-pagination>
            </div>
          </div>
          <div class="basic-specifications-box">结算基本规格资源</div>
        </div>
      </div>
      <div>
      </div>
    </div>
    <div style="padding-bottom: 60px;" v-show="orderA">
      <div class="order-line">
        <span class="order-line-text-3">{{$t("shoppingCartOrder.orderNo")}}</span>
        <span class="order-line-text">{{$t("shoppingCartOrder.buyTime")}}</span>
        <span class="order-line-text">{{$t("shoppingCartOrder.orderStatus")}}</span>
        <span class="order-line-text">{{$t("shoppingCartOrder.payWay")}}</span>
        <span class="order-line-text">{{$t("shoppingCartOrder.resourcesNumber")}}</span>
        <span class="order-line-text">{{$t("shoppingCartOrder.resourcesPrice")}}</span>
        <span class="order-line-text" style="width: 5%;">{{$t("shoppingCartOrder.orperation")}}</span>
      </div>
      <div class="region-icon-2" v-if="a.length > 0">
        <div class="order-line-1" :class="onReturnOrderColor(index)" v-for="(item, index) in a" :key="index">
          <span class="order-line-text-2">{{item.orderNo}}</span>
          <span class="order-line-text-1"></span>
          <span class="order-line-text-1">{{onReturnText(item.orderStatus)}}</span>
          <span class="order-line-text-1">
                            <span v-if='item.payType==1'>{{$t("shoppingCartOrder.payType.contractPay")}}</span>
                        </span>
          <span class="order-line-text-1">{{item.totalNums}}</span>
          <span class="order-line-text-1">{{$t("priceIcon")}}{{item.totalPrice}}</span>
          <div class="order-line-icon" @click="openDialog(item.id)">
            <img src="../assets/images/ico_preview.png" style="width:22px;height:24px; cursor: pointer;">
            <img src="../assets/images/ico_preview.png" style="width:22px;height:24px; cursor: pointer;">
          </div>
        </div>
      </div>
      <div class="region-icon-2" v-else>
        style="display:block;width:120px;height:120px;margin:60px auto 0">
        <div style="font-size: 30px;color: #B5B5B5;margin-top: 10px;width: 100%;text-align: center">
          {{$t("shoppingCartOrder.noCartData")}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '../common/api'
  import ajax from '../common/ajax'
  import util from '../common/util'
  import encryption from '../common/encryption'

  export default {
    name: "ShoppingExhibition",
    data() {
      return {
        selectedType: 1,
        count: 0,
        mydata: [],
        carItems: [],
        resourceList: [],
        customizeType: [],
        totalPrice: 0,
        page: 1,
        pageSize: 5,
        pageCount: 0,
        a: [],
        b: [],
        total: 0,
        seen: false,
        isA: true,
        isB: false,
        picA: true,
        picB: false,
        isC: false,
        isD: true,
        orderA: false,
        offer: false,
        light: false,
      }
    },
  }
</script>

<style scoped>

</style>
